<?php
//
/**
 * GA Report.
 *
 * @package WordPress
 * @subpackage Administration
 */
/** WordPress Administration Bootstrap */
require_once( dirname(__FILE__) . '/admin.php' );

$title = __('Google Analytics Basic Dashboard');

require_once( ABSPATH . 'wp-admin/admin-header.php' );
?>
<div class="wrap">
    <h2><?php echo esc_html($title); ?></h2>

    <div class="tool-box">
        <h2>
            <?php _e('<strong>Basic dashboard</strong>'); ?>
        </h2>
        <div>
            <br>
            <div id="embed-api-auth-container"></div>
            <br>
            <hr>
            <h3>
                <?php _e('Select account & property'); ?>
            </h3>
            <br>
            <div id="view-selector-container"></div>
            <br>
            <hr>
            <h3>
                <?php _e('Pageviews'); ?>
            </h3>
            <br>
            <div id="chart-container"></div>
            <br>
            <hr>
            <h3>
                <?php _e('Sessions'); ?>
            </h3>
            <br>
            <div id="chart-2-container"></div>
            <br>
        </div>
    </div>
</div>

<?php
include( ABSPATH . 'wp-admin/admin-footer.php' );
?>

<script>
    (function(w, d, s, g, js, fs) {
        g = w.gapi || (w.gapi = {});
        g.analytics = {q: [], ready: function(f) {
                this.q.push(f);
            }};
        js = d.createElement(s);
        fs = d.getElementsByTagName(s)[0];
        js.src = 'https://apis.google.com/js/platform.js';
        fs.parentNode.insertBefore(js, fs);
        js.onload = function() {
            g.load('analytics');
        };
    }(window, document, 'script'));
</script>

<script>

    gapi.analytics.ready(function() {

        /**
         * Authorize the user immediately if the user has already granted access.
         * If no access has been created, render an authorize button inside the
         * element with the ID "embed-api-auth-container".
         */
        gapi.analytics.auth.authorize({
            container: 'embed-api-auth-container',
            clientid: '271348605174-dgnl4uj36v9gsrj6ib1hpp6j0rk52koq.apps.googleusercontent.com',
        });


        /**
         * Create a new ViewSelector instance to be rendered inside of an
         * element with the id "view-selector-container".
         */
        var viewSelector = new gapi.analytics.ViewSelector({
            container: 'view-selector-container'
        });

        // Render the view selector to the page.
        viewSelector.execute();


        /**
         * Create a new DataChart instance with the given query parameters
         * and Google chart options. It will be rendered inside an element
         * with the id "chart-container".
         */
        var dataChart = new gapi.analytics.googleCharts.DataChart({
            query: {
                metrics: 'ga:pageviews',
                dimensions: 'ga:date',
                'start-date': '30daysAgo',
                'end-date': 'yesterday'
            },
            chart: {
                container: 'chart-container',
                type: 'LINE',
                options: {
                    width: '700'
                }
            }
        });

        var dataChart2 = new gapi.analytics.googleCharts.DataChart({
            query: {
                metrics: 'ga:sessions',
                dimensions: 'ga:date',
                'start-date': '30daysAgo',
                'end-date': 'yesterday'
            },
            chart: {
                container: 'chart-2-container',
                type: 'LINE',
                options: {
                    width: '700'
                }
            }
        });


        /**
         * Render the dataChart on the page whenever a new view is selected.
         */
        viewSelector.on('change', function(ids) {
            dataChart.set({query: {ids: ids}}).execute();
            dataChart2.set({query: {ids: ids}}).execute();
        });

    });
</script>
